<template>
	<div class="mainsu">
		<div class="main_spac1">
			<div class="main_white padding10 paddingBottom20">
				<div class="mainor_form">
					<div class="mainor_te">
						<!-- class="mainor_tea" -->
						<router-link to="/warehouse/stock/quick"
							><el-button> 快捷设置</el-button></router-link
						>
						<el-button @click="importDialog">导入</el-button>
					</div>
					<el-form
						:inline="true"
						:model="form"
						class="demo-form-inline"
						ref="userListFrom"
						label-width="70px"
					>
						<el-form-item label="商品分类" prop="category_id" class="wid220">
							<el-cascader
								v-model="form.category_id"
								:options="options"
								:props="defaultProps"
							></el-cascader>
						</el-form-item>
						<el-form-item label="商品" prop="goods_spu_id">
							<change-goods-input
								ref="changeGoodsInput"
								@clear="
									() => {
										this.form.goods_spu_id = '';
									}
								"
								@sendValue="
									(data) => {
										this.form.goods_spu_id = data.id;
									}
								"
							></change-goods-input>
						</el-form-item>
						<el-form-item label="状态" prop="status">
							<el-select
								v-model.trim="form.status"
								placeholder="状态"
								class="wid220"
							>
								<el-option label="所有" value=""></el-option>
								<el-option
									v-for="(statusList, index) in list.statusList"
									:key="index"
									:label="statusList"
									:value="index + 1"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button
								class="reset marginLeft10"
								type="primary"
								@click="
									$refs['userListFrom'].resetFields(),
										($refs['changeGoodsInput'].name = '')
								"
								>重置</el-button
							>
							<el-button
								type="primary"
								@click="getArticleList"
								:loading="listLoading"
								>搜索</el-button
							>
						</el-form-item>
					</el-form>
				</div>
				<div class="main_table marginTop10" style="min-height: 550px">
					<el-table
						ref="multipleTable"
						v-loading="listLoading"
						:data="list.list.data"
						element-loading-text="加载中"
						fit
						border
						highlight-current-row
						:header-cell-class-name="this.$verticaline"
					>
						<el-table-column label="商品名称" prop="goods.name"
							><template slot-scope="scope">
								{{ scope.row.goods.name }}【{{
									scope.row.spu_name ? scope.row.spu_name.title : ""
								}}】</template
							></el-table-column
						>

						<el-table-column label="SKU编码" prop="goods_spu_code" />
						<el-table-column label="单位" prop="spu_unit.title" />
						<el-table-column label="状态" prop="status">
							<template slot-scope="scope"
								><span
									:class="
										scope.row.inventory
											? scope.row.inventory.opening_status == 1
												? 'order1'
												: 'order2'
											: 'order2'
									"
									>{{
										scope.row.inventory
											? scope.row.inventory.opening_status == 1
												? "已设置"
												: "未设置"
											: "未设置"
									}}</span
								></template
							>
						</el-table-column>
						<el-table-column label="期初库存" prop="money">
							<template
								slot-scope="scope"
								v-if="
									scope.row.inventory
										? scope.row.inventory.opening_status == 1
											? true
											: false
										: false
								"
								>{{
									scope.row.inventory ? scope.row.inventory.opening_num : ""
								}}</template
							>
						</el-table-column>
						<el-table-column label="期初进价" prop="money">
							<template
								slot-scope="scope"
								v-if="
									scope.row.inventory
										? scope.row.inventory.opening_status == 1
											? true
											: false
										: false
								"
								>{{
									scope.row.inventory ? scope.row.inventory.opening_price : ""
								}}</template
							>
						</el-table-column>
						<el-table-column label="期初金额" prop="money">
							<template
								slot-scope="scope"
								v-if="
									scope.row.inventory
										? scope.row.inventory.opening_status == 1
											? true
											: false
										: false
								"
								>{{
									scope.row.inventory ? scope.row.inventory.opening_money : ""
								}}</template
							>
						</el-table-column>
					</el-table>
				</div>
				<div class="main_page boxdq">
					<div></div>
					<!-- 分页 -->
					<div class="main_page_r">
						<el-pagination
							:current-page="current.page"
							:page-sizes="[20, 30, 50, 100]"
							:page-size="limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalCount"
							background
							@size-change="changeLimit"
							@current-change="changePage"
						/>
					</div>
				</div>
			</div>
		</div>

		<el-dialog
			title="期初库存导入"
			:visible.sync="importbuVisible"
			class="main_dialog dialog700 importbu"
		>
			<div class="importbu_p">
				<h3>导入说明：</h3>
				<p>1.注意使用红色字体标注的必填字段,不填或错填将导致导入失败。</p>
				<p>2.导入文件仅支持xlsx格式,大小不超过2M ,数据不超过2000行。</p>
				<p>3.导入文件不能包含“合并单元格”，否则无法导入。</p>
				<p>
					4.导入时碰到数据不正确的行，系统会跳过错误的行继续执行未完成的行。
				</p>
			</div>
			<div class="importbu_an box">
				<el-button class="marginRight10" v-repeatClick @click="downTemplate"
					>下载模板</el-button
				>
				<el-upload
					class="upload-demo"
					:action="warehouse_stock_import"
					:on-success="importSuccess"
					:on-error="importerr"
					:show-file-list="false"
					:data="import_params"
				>
					<!-- :before-upload="beforeUpload" -->
					<el-button
						size="small"
						type="primary"
						v-repeatClick
						@click="handleUpload"
						>点击上传</el-button
					>
				</el-upload>

				<p v-if="import_file_name ? true : false">
					上传文件名：{{ import_file_name }}
				</p>
			</div>
			<div class="import_process" v-if="percentShow">
				<div class="progress">
					<el-progress
						:text-inside="true"
						:stroke-width="20"
						:percentage="percent"
						color="#19B098"
					></el-progress>
				</div>
				<div class="notice" v-if="percentShow">
					<div class="importtips">
						<p class="success" v-if="percent == 100">期初库存导入结束</p>
						<div v-for="(item, index) in reverseSum" :key="index">
							<p v-if="item.type == 2" :key="index" class="fail">
								{{ item.name }}，导入失败
							</p>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button :disabled="cancelDisabled" @click="importbuVisible = false"
					>取 消</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		opening_index,
		opening_importModel,
	} from "@/api/warehouse/warehouseStock";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { exportMethod } from "@/utils/index";
	import { recursion, category } from "@/utils/index";
	import { warehouse_stock_import } from "@/api/currency";
	import { mapGetters } from "vuex";

	export default {
		components: {},
		data() {
			return {
				exportMethod,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				// 列表数据
				list: {
					list: [],
				},
				listLoading: false,
				// 搜索
				form: {
					pid: "",
					category_id: [],
					status: null,
					goods_spu_id: "",
				},
				// 分类
				options: [],
				defaultProps: {
					children: "selfNext",
					label: "title",
					value: "id",
					checkStrictly: true,
				},
				// 订单导入
				warehouse_stock_import: warehouse_stock_import,
				importbuVisible: false,
				import_form: {
					user_type: 1,
					goods_type: 1,
					start_line_num: 2,
					end_line_num: "",
				},
				import_file_name: "",
				import_params: {},
				percent_gs: 0,
				percent: 0,
				percentShow: false,
				percent_list: [],
				importArrLength: 1,
				cancelDisabled: false,
			};
		},
		created() {
			// 列表
			this.opening_index();
		},
		computed: {
			...mapGetters(["userInfo", "avatar"]),
			reverseSum() {
				return this.percent_list;
			},
		},
		mounted() {
			window.Echo.channel("importOpening." + this.avatar.company_id).listen(
				"ImportOpeningEvent",
				(e) => {
					this.cancelDisabled = true;
					this.importArrLength = e.notice.count;
					this.percentShow = true;
					if (e.notice.code == 0) {
						this.percent_list.push({
							num: this.percent,
							type: 1,
							name: e.notice.msg,
						});
					} else if (e.notice.code == 100) {
						this.percent_list.push({
							num: this.percent,
							type: 2,
							name: e.notice.msg,
						});
					}
					this.percent_gs = parseInt(this.percent_gs) + 1;
					if ((this.percent_gs / this.importArrLength) * 100 >= 100) {
						this.percent = 100;
						this.cancelDisabled = false;
						this.getArticleList();
						return;
					}
					this.percent =
						this.percent_gs / this.importArrLength
							? parseInt((this.percent_gs / this.importArrLength) * 100)
							: 0;
				}
			);
		},
		methods: {
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.opening_index();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.opening_index();
			},
			changePage(page) {
				this.current.page = page;
				this.opening_index();
			},
			// 列表
			opening_index() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(
								Object.assign(apiUrl().name, this.list_form(), this.current)
							) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form(),
					this.current
				);
				opening_index(data).then((res) => {
					this.listLoading = false;
					if (res.errcode == 0) {
						this.options = recursion(res.data.categoryList, true);
						this.list = res.data;
						this.totalCount = res.data.list.total;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				form.pid = form.category_id[0] ? form.category_id[0] : "";
				form.category_id = category(form.category_id);

				return form;
			},
			// 导入订单
			importDialog() {
				this.import_file_name = "";
				this.percent_gs = 0;
				this.percent = 0;
				this.percentShow = false;
				this.percent_list = [];
				this.importArrLength = 1;
				this.cancelDisabled = false;
				this.importbuVisible = true;
			},
			// 下载模板
			downTemplate() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				opening_importModel(data).then((res) => {
					this.exportMethod(res, "期初库存导入模板");
				});
			},
			importerr(err, file, fileList) {
				this.$message.error("上传失败");
			},
			importSuccess(response, file, fileList) {
				if (response.errcode != 0) {
					this.$message.error(response.errmsg);
					return;
				} else {
					this.import_file_name = file.name;
				}
			},
			handleUpload() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ uid: this.userInfo.id }
				);
				this.import_params = data;
			},
			// beforeUpload(file) {
			// 	const isLt2M = file.size / 1024 / 1024 < 1;
			// 	if (!isLt2M) {
			// 		this.$message.error("上传商品图片大小不能超过 1MB!");
			// 	}
			// 	return isLt2M;
			// },
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
	.mainor_form form {
		width: calc(100% - 180px);
	}
}

// 支付状态
.success {
	color: $green;
}
.unpaid {
	color: $colour_red;
}
// 订单状态
.order0 {
	color: $order_color1;
}
.order1 {
	color: $order_color2;
}
.order2 {
	color: $order_color4;
}
.order3 {
	color: $order_color4;
}
.import_process {
	width: 100%;
}

.progress {
	padding: 15px 40px 15px 0;
}
.notice {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-right: 40px;
	.importtips {
		overflow-y: auto;
		width: 100%;
		height: 84px;
		height: 84px;
		background: #ffffff;
		border: 1px solid #d8d8d8;
		padding: 10px 15px;
		.fail {
			color: #ff5a5a;
			line-height: 1.2;
			font-size: 12px;
		}
		.success {
			color: #19b098;
			line-height: 1.2;
			font-size: 12px;
		}
	}
}
.importbu_in {
	/deep/ .el-input__inner {
		padding-right: 0;
	}
}
.user_cell_cox {
	display: flex;
	align-items: center;
}
.label-pic {
	width: 16px;
	height: 20px;
	margin-right: 6px;
	margin-top: 2px;
}
.item-label {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.item-label span {
	height: auto;
	padding: 4px 10px;
	border: 1px solid #e6a23c;
	color: #e6a23c;
	margin-bottom: 5px;
	border-radius: 3px;
	margin-right: 10px;
}
</style>
